import React from "react";
import "../CSS/sidebar.css";
import ImageIconTag from './NodeIcon'

export default function TheAddNodeDialog({
  onMaterialSelect,
  materials,
  showSidebar,
  mousePosition
}) {
  return (
    <div
      hidden={showSidebar}
      style={{
        borderRadius: "10px",
        border: "solid 1px",
        borderColor: "#EDEDED",
        margin: "10px",
        overflowY: "auto",
        position: "absolute",
        width: "fit-content",
        height: "40%",
        left: `${mousePosition.x}px`,
        top: `${mousePosition.y}px`,
        bottom: "25px",
        background: "white",
        padding: "10px",
        boxSizing: "10px",
        zIndex: 2,
      }}
    >
      <div className="titleStyleSidebar">
        <div style={{ display: "flex", justifyContent: "center", flexGrow: '1' }}>Attach node</div>
      </div>

      <div className="subContainerSidebar">
        {materials.map((material) => (
          <div
            key={material}
            className="listStyle"
            onClick={() => onMaterialSelect(material)}
          >
            <ImageIconTag type={material} size="s" />
            {material}
          </div>
        ))}
      </div>
    </div>
  );
}
